<template>
  <section class="faq-one">
    <img src="/assets/images/background/faq-one-bg.png" alt="Awesome Image" class="faq-one__bg"/>
    <div class="container">
      <div class="block-title text-center">
        <h2 class="block-title__title">您可能想知道些什么?</h2><!-- /.block-title__title -->
      </div><!-- /.block-title -->
      <div class="accrodion-grp" data-grp-name="faq-accrodion">
        <div class="accrodion active wow fadeInUp" data-wow-duration="1500ms" v-for="item in data" data-wow-delay="0ms">
          <div class="accrodion-inner">
            <div class="accrodion-title">
              <h4>{{item.question}}</h4>
            </div>
            <div class="accrodion-content">
              <div class="inner">
                <p>{{item.answer}}.</p>
              </div><!-- /.inner -->
            </div>
          </div><!-- /.accrodion-inner -->
        </div>
      </div>
    </div><!-- /.container -->
  </section>
</template>

<script>
import apis from '../apis/apis';

export default {
  name: "Faq",
  data() {
    return {
      data: []
    }
  },
  methods: {
    initFaq() {
      if ($('.accrodion-grp').length) {
        var accrodionGrp = $('.accrodion-grp');
        accrodionGrp.each(function () {
          var accrodionName = $(this).data('grp-name');
          var Self = $(this);
          var accordion = Self.find('.accrodion');
          Self.addClass(accrodionName);
          Self.find('.accrodion .accrodion-content').hide();
          Self.find('.accrodion.active').find('.accrodion-content').show();
          accordion.each(function () {
            $(this).find('.accrodion-title').on('click', function () {
              if ($(this).parent().parent().hasClass('active') === false) {
                $('.accrodion-grp.' + accrodionName).find('.accrodion').removeClass('active');
                $('.accrodion-grp.' + accrodionName).find('.accrodion').find('.accrodion-content').slideUp();
                $(this).parent().parent().addClass('active');
                $(this).parent().parent().find('.accrodion-content').slideDown();
              }
              ;


            });
          });
        });

      }
    },
    getData() {
      apis.getFaqData().then(res => {
        this.data = res.data
        this.$nextTick(() => {
          this.initFaq()
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
